<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 10px">
          <i class="el-icon-search"></i>
          搜索
        </span>
                <el-button-group style="float: right; padding: 3px 0">
                    <el-button
                            size="small"
                            type="primary"
                            icon="el-icon-search"
                            @click="btnSearch"
                    >搜索</el-button
                    >
                    <el-button
                            size="small"
                            icon="el-icon-refresh"
                            type="primary"
                            @click="btnReset"
                    >重置</el-button
                    >
                </el-button-group>
            </div>
            <el-form :model="searchForm" :inline="true" ref="productTypeFormRef">
                <el-row>
                    <el-col :span="colSize">
                        <el-form-item label="用户名称" prop="name">
                            <el-input
                                    v-model="searchForm.name"
                                    placeholder="用户名称"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="colSize">
                        <el-form-item label="角色" prop="roleId">
                            <el-select
                                    v-model="searchForm.roleId"
                                    filterable
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="data-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 7px">
          <i class="el-icon-tickets"></i>
          用户列表
        </span>
                <div style="float: right; padding: 3px 0">
                    <el-button
                            size="small"
                            type="warning"
                            icon="el-icon-plus"
                            @click="btnAdd"
                    >添加</el-button
                    >
                    <!--          <el-button-->
                    <!--            size="small"-->
                    <!--            type="danger"-->
                    <!--            icon="el-icon-delete"-->
                    <!--            @click="btnDelete"-->
                    <!--            >批量删除</el-button-->
                    <!--          >-->
                </div>
            </div>
            <el-table fit :data="userList" stripe style="width: 100%">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="id" label="编号" width="50">
                </el-table-column>
                <el-table-column align="center" prop="loginName" label="登录账号">
                </el-table-column>
                <el-table-column align="center" label="名字" prop="name">
                </el-table-column>
                <el-table-column align="center" label="联系方式" prop="contact">
                </el-table-column>
                <el-table-column align="center" label="邮箱" prop="email">
                </el-table-column>
                <el-table-column align="center" label="积分" prop="integral">
                </el-table-column>
                <el-table-column align="center" label="权限" prop="roleName">
                </el-table-column>
                <el-table-column align="center" label="注册时间" prop="createTime" :formatter="dateFormat">
                </el-table-column>
                <el-table-column align="center" label="上次登录时间" prop="lastLoginTime" :formatter="dateFormat">
                </el-table-column>
                <el-table-column width="300" align="center" label="操作">
                    <template slot-scope="scope">
                        <p>
                            <el-button
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="btnView(scope.row)"
                            >查看</el-button
                            >
                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="btnEdit(scope.row)"
                            >编辑</el-button
                            >
                            <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="btnDelete(scope.row)"
                            >删除</el-button
                            >
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 30]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import {api_deleteUser, api_userList} from "../../api/user";
    import {api_allRoleList} from "../../api/userRole";

    export default {
        data() {
            return {
                colSize: 6,
                userList: [],
                roleList: [],
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    name: null,
                    contact:null,
                    roleId: null,
                },
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 3,
                    total: 11,
                },
            }
        },
        created() {
            this.btnSearch()
            this.handleRoleList()
        },
        methods: {
            dateFormat(row, column, cellValue) {
                if(cellValue==null || cellValue=="") return "";
                let date = new Date(cellValue);
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s ;
            },
            btnSearch() {
                this.handleUserList()
            },
            btnReset() {
                this.$refs.productTypeFormRef.resetFields()
            },
            btnAdd() {
                this.$router.push('/system/userEdit')
            },
            btnView(row) {
                this.$router.push({
                    path: '/system/userEdit',
                    query: {
                        id: row.id,
                        handleType: 'view',
                    },
                })
            },
            btnEdit(row) {
                this.$router.push({
                    path: '/system/userEdit',
                    query: {
                        id: row.id,
                        handleType: 'edit',
                    },
                })
            },
            async btnDelete(row) {
                this.$confirm('此操作将删除选中的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        //获取选中行id集合
                        this.handleDelete(row.id)
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消',
                        })
                    })
            },
            handleDelete(id) {
                let params = new URLSearchParams()
                params.append('id', id)
                api_deleteUser(params).then((response) => {
                    const res = response.data
                    if (!res.success) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                    this.btnSearch()
                })
            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val
                this.btnSearch()
            },
            handleCurrentChange(val) {
                this.searchForm.pageNum = val
                this.btnSearch()
            },
            //获取所有用户列表
            async handleUserList() {
                const param = {
                    page: this.searchForm.pageNum,
                    limit: this.searchForm.pageSize,
                    bean: JSON.stringify(this.searchForm),
                }
                const { data: res } = await api_userList(param)
                this.userList = res.data.data
                this.page.total = res.data.total
            },
            //获取角色列表
            async handleRoleList() {
                const { data: res } = await api_allRoleList()
                this.roleList = res.data
            },
        },
    }
</script>

<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: '';
    }
    .clearfix:after {
        clear: both;
    }
    .box-card {
        width: 100%;
        margin: auto;
    }

    .data-card {
        margin-top: 10px;
    }

    .el-date-picker {
        float: left;
    }
</style>
